<template>
  <div id="recruiting">
    <div class="recruitingContent">
      <!-- 就业资讯 -->
      <div class="recruitingContentJobInfo">
        <div class="recruitingContentJobInfoBox">
          <h2>就业资讯</h2>
          <div style="width: 100%; height: .02rem; background-color: #eee; margin: .2rem 0;"></div>
          <ul>
            <li v-for="(item, index) in obtainJobNewsData" :key="index" @click="jumpTo('/newsDetail?sceneType=obtainJob&obtainJobNewsId=' + item.id)">{{item.title}}</li>
          </ul>
        </div>
      </div>
      <!-- 高端职业 -->
      <div class="recruitingContentHighJob">
        <div class="recruitingContentHighJobBox">
          <h2>
            高端职业
            <label for="liveSearch">
              <input id="liveSearch" type="text" placeholder="请输入" v-model="professionSearch" @keydown.enter="fetchHighJob()">
              <img src="../../assets/img/ideaMarket/sear.png" alt="" @click="fetchHighJob()">
            </label>
          </h2>
          <div style="width: 100%; height: .02rem; background-color: #eee; margin: .2rem 0 0 0;"></div>
          <ul>
            <li v-for="(item, index) in highendJobData" :key="index" @click="jumpTo('/jobVacancy?highendJobId=' + item.id)">
              <div class="recruitingContentHighJobFront">
                <h3>{{item.positionName}} <span>{{item.salary}}</span></h3>
                <p>{{item.workAddress}} | {{item.education}} | {{item.years}}</p>
              </div>
              <div class="recruitingContentHighJobCentre">
                <p>{{item.department}}</p>
              </div>
              <div class="recruitingContentHighJobLater">
                <p>{{item.userName}}</p>
                <img :src="$globalImageUrl + item.avatar" alt="">
              </div>
            </li>
          </ul>
        </div>
        <page-number
          :pageTotal="pageTotals"
          @prevPage="onPrevPage($event)"
          @pageActive="onPageActive($event)"
          @nextPage="onNextPage($event)"
          @pageChange="onPageChange($event)"
        ></page-number>
      </div>
      <!-- 常驻企业 -->
      <div class="recruitingContentLive">
        <div class="recruitingContentLiveBox">
          <div class="recruitingContentLiveTitle">
            <div>常驻企业</div>
            <div class="recruitingContentLiveTitleMore" @click="jumpTo('/stylistInfoList?sceneType=enterpriseList&type=jiuye')">更多</div>
          </div>
          <ul>
            <!-- <li v-for="(item, index) in permanentCompany" :key="index" @click="jumpTo('/stylistInfo?sceneType=enterprise&companyId=' + item.id)"> -->
            <li v-for="(item, index) in permanentCompany" :key="index" @click="jumpTo('/stylistInfo?sceneType=enterprise&companyId=' + item.id + '&uId=' + item.userId)">
              <div class="liveBoxInfo">
                <img :src="$globalImageUrl + item.enterpriseLogo" alt="">
                <div class="liveBoxInfoRight">
                  <h4 class="ellipse">{{item.companyName}}</h4>
                  <span class="ellipse">{{item.contacts}}</span>
                  <br>
                  <span class="ellipse">{{item.phone}}</span>
                </div>
              </div>
              <div v-show="false" style="width: 100%; border-bottom: .01rem dashed #eee; margin: .1rem 0;"></div>
              <p class="ellipse" v-show="false">热招：<span>前端工程师</span><span>前端工程师</span><span>前端工程师</span></p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pageNumber from '../../components/pageNumber/index.vue'

export default {
  name: 'recruiting',
  components: {
    pageNumber
  },
  data () {
    return {
      pageTotals: 1,
      obtainJobNewsData: [],
      highendJobData: [],
      permanentCompany: [],
      professionSearch: ''
    }
  },
  created () {
    this.fetchJobNews()
    // this.fetchHighJob(1)
    this.onPageChange(1)
    this.fetchResidentEnter()
  },
  methods: {
    onPrevPage (val) {
    },
    onPageActive (val) {
    },
    onNextPage (val) {
    },
    onPageChange (val) {
      this.fetchHighJob(val)
    },
    // 获取就业资讯列表
    fetchJobNews () {
      this.$api.getJobNews({
      }).then(res => {
        if (res.code === 0) {
          this.obtainJobNewsData = res.data
        }
      })
    },
    // 获取高端职位列表
    fetchHighJob (val) {
      this.$api.getHighJob({
        searchText: this.professionSearch,
        pageNum: val
      }).then(res => {
        if (res.code === 0) {
          this.highendJobData = res.data
          console.log(res)
          this.pageTotals = Math.ceil(res.total / 10)
        }
      })
    },
    // 获取常驻企业列表
    fetchResidentEnter () {
      this.$api.getResidentEnter({
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.permanentCompany = res.data
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
#recruiting{
  .recruitingContent{
    width: 1200px;
    margin: auto;
    padding: .5rem 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    .recruitingContentJobInfo{
      width: 2.5rem;
      .recruitingContentJobInfoBox{
        background-color: #fff;
        padding: .2rem;
        border-radius: .1rem;
      }
      ul{
        li{
          font-size: 0.14rem;
          font-weight: 500;
          line-height: 0.22rem;
          color: #999;
          padding: .05rem 0;
        }
      }
    }
    .recruitingContentHighJob{
      padding: 0 .2rem;
      width: 7rem;
      box-sizing: border-box;
      .recruitingContentHighJobBox{
        background-color: #fff;
        padding: .2rem;
        border-radius: .1rem;
        h2{
          font-size: 0.2rem;
          font-weight: bold;
          color: #333;
          line-height: 0.3rem;
          label{
            display: inline-block;
            width: 2rem;
            height: .4rem;
            position: relative;
            // border: 1px solid #eee;
            border-radius: .1rem;
            float: right;
            background-color: #eee;
            overflow: hidden;
            input#liveSearch{
              display: inline-block;
              width: 100%;
              height: 100%;
              padding-left: .2rem;
              padding-right: .5rem;
              font-size: .16rem;
              font-weight: 500;
              color: #333;
              line-height: .5rem;
              background-color: #eee;
            }
            img{
              width: .25rem;
              height: .25rem;
              position: absolute;
              right: .15rem;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
        ul{
          li{
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            line-height: .5rem;
            border-bottom: .02rem solid #eee;
            padding: .1rem 0;
            p{
              font-size: 0.12rem;
              font-weight: 500;
              line-height: 0.2rem;
              color: #9FA3B0;
            }
            .recruitingContentHighJobFront{
              width: 33.33%;
              h3{
                font-size: 0.16rem;
                font-weight: 500;
                line-height: 0.25rem;
                color: #15A29C;
                span{
                  color: red;
                }
              }
            }
            .recruitingContentHighJobCentre{
              width: 33.33%;
              text-align: center;
              p{
                display: inline-block;
              }
            }
            .recruitingContentHighJobLater{
              width: 33.33%;
              text-align: right;
              img{
                display: inline-block;
                width: .3rem;
                height: .3rem;
              }
              p{
                height: .3rem;
                line-height: .3rem;
                vertical-align: middle;
                display: inline-block;
              }
            }
          }
        }
      }
    }
    .recruitingContentLive{
      width: 2.5rem;
      display: inline-block;
      vertical-align: top;
      .recruitingContentLiveBox{
        .recruitingContentLiveTitle{
        display: flex;
        justify-content: space-between;
         div{
          font-size: .2rem;
          font-weight: bold;
          color: #333;
          line-height: 0.3rem;
          margin-bottom: 20px;
         }
        .recruitingContentLiveTitleMore{
          font-size: .15rem;
          color:#15A29C;
        }
       }
        // h2{
        //   font-size: 0.2rem;
        //   line-height: 0.28rem;
        //   font-weight: 500;
        //   color: #333;
        //   padding-bottom: .1rem;
        // }
        ul{
          li{
            border-radius: .1rem;
            background-color: #fff;
            padding: .15rem;
            margin-bottom: .2rem;
            div.liveBoxInfo{
              font-size: 0;
              img{
                display: inline-block;
                width: .8rem;
                height: .8rem;
              }
              .liveBoxInfoRight{
                width: calc(100% - .8rem);
                height: .8rem;
                display: inline-block;
                vertical-align: top;
                padding-left: .1rem;
                text-align: right;
                h4{
                  font-size: 0.14rem;
                  line-height: 0.22rem;
                  color: #414A60;
                  font-weight: 500;
                }
                span{
                  font-size: 0.12rem;
                  line-height: 0.2rem;
                  color: #999;
                  font-weight: 500;
                }
              }
            }
            p{
              font-size: 0.12rem;
              line-height: 0.2rem;
              color: #999;
              font-weight: 500;
              span{
                font-size: 0.12rem;
                line-height: 0.2rem;
                color: #999;
                font-weight: 500;
                padding-right: .1rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>
